<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-10 14:26:48
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-11 18:23:47
 * @FilePath: /web/src/views/indexPage/quality.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 11:09:23
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div>
		<el-row>
			<el-col :span="16">
				<div class="mid" >
					<div class="plan" style="margin-left: -1%;">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">物料库存趋势图</div>
							<el-date-picker
								class="date"
								v-model="dateRange"
								size="mini"
								style="width: 240px"
								value-format="yyyy-MM-dd"
								type="daterange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							></el-date-picker>
						</div>
						<lineChart :lineChart="lineChart"></lineChart>
					</div>
					
				</div>
				<div class="mid" >
					<div class="plan" style="margin-left: -1%;">
						<div class="title">
							<img src="../../assets/images/u39.svg" alt="">
							<div class="statistics">物料消耗趋势图</div>
							<el-date-picker
								class="date"
								v-model="dateRange1"
								size="mini"
								style="width: 240px"
								value-format="yyyy-MM-dd"
								type="daterange"
								range-separator="-"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							></el-date-picker>
						</div>
						
						<lineChart :lineChart="lineChart1"></lineChart>
					</div>
					
				</div>
			</el-col>
			<el-col :span="8">
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">物料检验批次</div>
					</div>
					<div class="list">
						<div class="top">
							<div class="" style="width: 120px;">检验批次号</div>
							<div class="">数量</div>
							<div class="">检测人</div>
							<div class="">检测时间</div>
							<div class="">检测结果</div>
						</div>
						<div class="item" v-for="(item,index) in list" :key="index">
							<div class="" style="width: 120px;">{{item.pc}}</div>
							<div class="">{{item.sl}}</div>
							<div class="">{{item.jcr}}</div>
							<div class="">{{item.sj}}</div>
							<div class="">{{ item.jg }}</div>
						</div>
					</div>
				</div>
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">产品列表</div>
						<el-radio-group v-model="prodType" size="mini" class="tab">
							<el-radio-button v-for="(item,index) in nameList" :key="index" :label="item.name">
							</el-radio-button>
						</el-radio-group>
					</div>
					<div class="list">
						<div class="top">
							<div class="" style="width: 120px;">产品编号</div>
							<div class="">产品类型</div>
							<div class="">生产员</div>
							<div class="">生产时间</div>
						</div>
						<div class="item" v-for="(item,index) in list" :key="index">
							<div class="" style="width: 120px;">{{item.pc}}</div>
							<div class="">{{item.sl}}</div>
							<div class="">{{item.jcr}}</div>
							<div class="">{{ item.sl }}</div>
						</div>
					</div>
				</div>
				<div class="record">
					<div class="top">
						<div class="left"><img src="../../assets/images/kuohao.png" alt=""></div>
						<div class="right"><img src="../../assets/images/u193.svg" alt=""></div>
						<div class="text">产品详情溯源</div>
					</div>
					<div class="list" style="padding: 20px;overflow-y: auto;">
						<div class="search">
							<el-input style="width: 70%;" placeholder="请输入内容" size="small" clearable v-model="input3" class="input-with-select">
							</el-input>
							<el-button type="primary" size="small" style="margin-left: 20px;">搜索</el-button>
						</div>
						<div class="info">
							<div class="type">
								<div>GGJ20240903020</div>
								<div style="margin-left: 20px;">钢拱架</div>
							</div>
							<div class="line">
								<div class="name">生产员：</div>
								<div>张三</div>
							</div>
							<div class="line">
								<div class="name">生产时间：</div>
								<div>2024-09-03  15:26</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import pieChart from '../../components/pieChart/index.vue'
import lineChart from '../../components/lineChart/index.vue'
import { getInChart,getOutChart } from '../../api/newBigScreen'
import {getprolist,getList} from '../../api/product'
import dayjs from 'dayjs'
export default {
	components:{
		pieChart,
		lineChart
	},
	data(){
		return{
			chartData: [{
				name: '钢拱架产线',
				value: 8
			},
			{
				name: '小导管产线',
				value: 8
			},
			{
				name: '网片产线',
				value: 8
			},
			{
				name: '连接钢板产线',
				value: 8
			}
			],
			lineChart: {
				title: '',
				name:['物料1','物料2','物料3','物料4'],
				categories: ['2024/8/23', '2024/8/24', '2024/8/25', '2024/8/26', '2024/8/27', '2024/8/28', '2024/8/29'],
				values: []
			},
			lineChart1: {
				title: '',
				name:['物料1','物料2','物料3','物料4'],
				categories: ['2024/8/23', '2024/8/24', '2024/8/25', '2024/8/26', '2024/8/27', '2024/8/28', '2024/8/29'],
				values: []
			},
			list:[{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			{pc:'JY20240903004',sl:'30',jcr:'张三',sj:'2024.09.03  13：26',jg:'正常'},
			],
			input3:'',
			dateRange:[],
			dateRange1:[],
			nameList:[],
			prodType:''
		}
	},
	mounted() {
		this.dateRange=[dayjs().subtract(7, 'day').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
		this.dateRange1=[dayjs().subtract(7, 'day').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
		let parmars={
			beginTimeFormat:this.dateRange[0],
			endTimeFormat:this.dateRange[1]
		}
		getInChart(parmars).then(res=>{
			// console.log(res)
			this.lineChart.name = res.data.legend.data
			this.lineChart.categories = res.data.xAxis.data
			res.data.series.map(item=>{
				this.lineChart.values.push(item.data)
			})
		})
		getOutChart(parmars).then(res=>{
			// console.log(res)
			this.lineChart1.name = res.data.legend.data
			this.lineChart1.categories = res.data.xAxis.data
			res.data.series.map(item=>{
				this.lineChart1.values.push(item.data)
			})
		})
		this.getprolist()
	},
	methods:{
		getprolist() {
      getprolist().then(res =>{
        if(res.success == true){
          this.nameList = res.data
					console.log(this.nameList)
					this.prodType = this.nameList[0].name
        }
      })
    },
	}
};
</script>
<style lang="scss" scoped>
.ku {
	position: relative;
	margin-left: 4%;
	width: 70%;

	img {
		width: 100%;
		height: 120px;
	}

	.text {
		position: absolute;
		color: white;
		top: 30px;
		left: 20px;
		font-weight: 700;
		font-style: normal;
		font-size: 20px;
		margin-left: 50px;
		display: flex;
		width: 100%;

	}

	.day {
		margin: 0 70px;
		font-size: 36px;
		color: #FF9900;
	}

	.shu {
		margin-left: 20%;

		.more {
			display: flex;

			img {
				width: 10px;
				height: 22px;
				margin-top: 5px;
			}
		}
	}

	.column {
		font-weight: 700;
		font-style: normal;
		font-size: 28px;
		color: #2DE9DB;
		margin-top: 10px;

	}
}

.mid {
	margin-top: 20px;
	margin-left: 9%;
	
	.plan {
		width: 90%;
		border: 1px solid rgba(2, 231, 243, 1);
		position: relative;
		
		.date{
			position: absolute;
			right: 30px;
    	top: 20px;
			background: transparent;
			
		}
		.el-input__inner {
			background-color: transparent !important; /* 将背景色改为红色 */
		}
		::v-deep .el-range-input{
			background-color: transparent !important; /* 将背景色改为红色 */
			color: #00FFFF;
		}
		.right {
			color: white;
			position: absolute;
			top: 10px;
			right: 10px;
			font-weight: bold;

			.yellow {
				color: #fccd1d;
			}
		}
	}

	.title {
		position: relative;

		.statistics {
			top: 6px;
			left: 10px;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #01F7FD;
			position: absolute;
		}
	}

	.progress {
		margin-left: 20px;
		margin-top: 20px;
		position: relative;
		height: 50px;

		.left {
			background-color: rgba(252, 205, 29, .3);
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			width: 100px;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
		}

		.right1 {
			border-top: 50px solid rgba(252, 205, 29, .3);
			/* 梯形的高度 */
			border-right: 25px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 100px;
			top: 0px;
		}

		.blue {
			border-bottom: 40px solid rgba(1, 247, 253, .5);
			/* 梯形的高度 */
			border-left: 20px solid transparent;
			/* 右边斜面的宽度 */
			height: 0;
			width: 40px;
			/* 梯形的宽度 */
			position: absolute;
			left: 121px;
			top: 4px;
		}

		.blue1 {
			background-color: rgba(1, 247, 253, .5);
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			width: 70%;
			height: 40px;
			position: absolute;
			left: 161px;
			top: 4px;
		}

		.text {
			position: absolute;
			top: 10px;
			left: 10px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 20px;
			color: #FCCD1D;
		}

		.middle {
			display: flex;
			position: absolute;
			left: 160px;
			top: 15px;
		}

		.line {
			height: 20px;
			width: 5px;
			border-radius: 3px;
			background: white;
			margin-right: 8px;
		}

		.yellow {
			color: #FCCD1D;
		}

		.total {
			position: absolute;
			right: 10%;
			top: 13px;
			font-size: 18px;
			color: white;
			font-weight: bold;
		}
	}
}

.waring {
	width: 82%;
	height: 220px;
	margin-left: 11%;
	margin-top: 20px;
	overflow: hidden;
	overflow-y: scroll;

	.redline {
		width: 98%;
		background: rgb(144, 65, 73);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}

	.yellowline {
		width: 98%;
		background: rgb(179, 115, 34);
		color: white;
		border-radius: 5px;
		height: 32px;
		line-height: 32px;
		margin-top: 10px;
		display: flex;
		align-content: center;
		font-size: 16px;
		font-weight: bold;
		padding-left: 10px;
	}
}

.record {
	margin-left: 9%;
	width: 90%;
	margin-top: 20px;

	.top {
		display: flex;
		position: relative;
		.tab{
			position: absolute;
			right: 40px;
			top: 2px;
			.el-radio-button__orig-radio:checked + .el-radio-button__inner{
				width: 40px;
				padding: 2px 8px;
			}
		}
		.left {
			img {
				width: 30px;
				height: 40px;
			}
		}

		.right {
			img {
				margin-top: 5px;
				width: 134%;
				height: 30px;
			}
		}

		.text {
			position: absolute;
			left: 30px;
			top: 8px;
			font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
			font-weight: 700;
			font-style: normal;
			font-size: 18px;
			color: #00FFFF;
		}
	}
}

.box {
	width: 100%;
	margin-top: 20px;
	border: 1px solid rgba(2, 231, 243, 1);
	margin-left: 2%;
	padding: 20px;
	display: flex;

	.introduce {
		width: 30%;
		font-size: 18px;
		color: #02A7F0;
		border: 1px solid #fff;
		padding: 10px;
	}

	.right {
		width: 500px;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		div {
			width: 250px;

			img {
				width: 248px;
				height: 140px;
			}
		}
	}
}

.production {
	.yuan {
		position: relative;
		width: 142px;
		height: 142px;
		background: url("../../assets/images/u416.svg");
		margin: 40px 0 40px 100px;

		.text {
			color: #01F7FD;
			font-size: 16px;

		}

		.status {
			color: #70B603;
			font-size: 14px;
		}

		.nei {
			position: absolute;
			top: 4px;
			left: 4px;
			width: 134px;
			height: 134px;
			background-color: rgb(68, 83, 115);
			border-radius: 50%;
			z-index: 9;
		}

		.nei1 {
			background: url("../../assets/images/u427.svg") no-repeat;
			position: absolute;
			top: 11px;
			left: 11px;
			width: 120px;
			height: 120px;
			z-index: 12;
		}

		.nei2 {
			position: absolute;
			top: 15px;
			left: 15px;
			width: 110px;
			height: 110px;
			background-color: rgb(33, 59, 111);
			border-radius: 50%;
			z-index: 10;
		}

		.nei3 {
			position: absolute;
			top: 34px;
			left: 34px;
			width: 80px;
			height: 80px;
			background: url("../../assets/images/u428.svg") no-repeat;
			z-index: 12;
		}

		.nei4 {
			position: absolute;
			top: 42px;
			left: 42px;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background: red;
			color: white;
			font-size: 18px;
			line-height: 60px;
			text-align: center;
			z-index: 12;
		}
	}
}
.list{
	width: 78%;
	margin-left: 2%;
	border: 1px solid #00FFFF;
	max-height: 260px;
	margin-top: 20px;
	overflow: hidden;
	overflow-y: scroll;
	.top{
		color: #FCCD1D;
		font-size: 16px;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		background-color: rgb(8,54,78);
		padding: 5px 20px;
		margin-top: 20px;
	}
	.item{
		color: white;
		display: flex;
		justify-content: space-between;
		background-color: rgb(8,54,78);
		padding: 5px 20px;
		margin-top: 20px;
	}
	.search{
		background-color: rgba(2, 141, 159, 1);
		padding: 10px;
		border-radius: 5px;
		display: flex;
	}
	.info{
		background-color: rgb(8, 54, 78, 1);
		padding: 20px 10px;
		color: white;font-size: 16px;font-weight: bold;
		div{
			display: flex;
			
		}
		.line{
			margin-top: 10px;
		}
		.name{
			color: #FCCD1D;
		}
	}
}
</style>